﻿@page "/MenuLayout"

@using Radzen
@using Radzen.Blazor

<h3>MenuLayout</h3>


<RadzenLayout style="position: relative;grid-template-areas: 'rz-sidebar rz-header' 'rz-sidebar rz-body'">
    <RadzenHeader>
        <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar Responsive="false" @bind-Expanded="@sidebarExpanded" style="position: absolute; z-index: 3">
        <RadzenStack AlignItems="AlignItems.End" class="rz-p-2">
            <RadzenButton Icon="west" Variant="Variant.Text" ButtonStyle="Radzen.ButtonStyle.Secondary" Click="@(() => sidebarExpanded = false)" />
        </RadzenStack>
        <RadzenPanelMenu Click="LayoutClick" DisplayStyle="@(sidebarExpanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)" ShowArrow="false">
            <RadzenPanelMenuItem Value="1" Text="Pattern" Icon="dashboard" />
            <RadzenPanelMenuItem Value="2" Text="Bare" Icon="home" />

        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        <RadzenTabs @bind-SelectedIndex=@selectedIndex>
            <Tabs>
                <RadzenTabsItem Text="Device" Visible="DeviceVisible">
                    Device
                </RadzenTabsItem>
                <RadzenTabsItem Text="Wafer" Visible="WaferVisible">
                    Wafer
                </RadzenTabsItem>
                <RadzenTabsItem Text="Recipe" Visible="RecipeVisible">
                    Recipe
                </RadzenTabsItem>
                <RadzenTabsItem Text="Pattern" Visible="PatternVisible">
                    Pattern
                </RadzenTabsItem>
                <RadzenTabsItem Text="Bare" Visible="BareVisible">
                    Bare
                </RadzenTabsItem>
            </Tabs>
        </RadzenTabs>
    </RadzenBody>
    @if (sidebarExpanded)
    {
    <div @onclick="@(() => sidebarExpanded = false)" class="rz-dialog-mask" style="position: absolute; z-index: 2"></div>
    }
</RadzenLayout>

@code {

    int selectedIndex = 0;
    bool sidebarExpanded = true;

    bool DeviceVisible = true;
    bool WaferVisible = true;
    bool RecipeVisible = true;
    bool PatternVisible = true;
    bool BareVisible = false;

    public async Task LayoutClick(MenuItemEventArgs args)
    {
        var value = Convert.ToInt32(args.Value);
        if (value == 1)
        {
            PatternVisible = true;
            BareVisible = false;
        }
        else if (value == 2)
        {
            PatternVisible = false;
            BareVisible = true;
        }
    }
}